<template>
  <div class="nannyIndex">
    <!-- 导航搜索栏 -->
    <div class="navigation">
      <van-icon class="icon1" name="arrow-left" @click="$router.back()" />
      <span class="navitext">家政服务</span>
      <van-search v-model="search" placeholder="请输入搜索关键词" />
      <van-icon
        class="icon2"
        name="friends-o"
        size="20"
        color="#FFFFFF"
        @click="$router.push('/my')"
      />
    </div>
    <!-- 招聘的组件 -->
    <recruitment-item></recruitment-item>
  </div>
</template>
<script>
// 公司人员详情组件
// import ServersList from '@/components/servers-list'
// 月嫂招聘的组件
import recruitmentItem from '@/components/recruitment-item'
import { gethousekeeping } from '@/api/home.js'
export default {
  name: 'nannydetail',
  created () {
    // 初始化渲染
    this.loadCompany()
  },
  components: {
    // ServersList
    recruitmentItem
  },
  data () {
    return {
      companyList: [], // 类型
      finished: false,
      search: ''
    }
  },
  methods: {
    // 职业详情项目
    async loadCompany () {
      try {
        const { data } = await gethousekeeping()
        // console.log(data[0].occupation)
        this.companyList = data[0].occupation
      } catch (error) {
        this.$toast.fail('获取失败')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.nannyIndex {
  .navigation {
    position: relative;
    height: 110px;
    background-color: #354499;
    .navitext {
      font-size: 20px;
      position: absolute;
      top: 30px;
      left: 60px;
      color: #fafafa;
    }
    /deep/ .icon1 {
      font-size: 25px;
      top: 15px;
      left: 20px;
      color: #fafafa;
    }
    /deep/ .icon2 {
      top: 24px;
      left: 88%;
    }
    .van-search {
      position: absolute;
      top: 0;
      left: 170px;
      width: 70%;
      background-color: #354499;
    }
  }
  /deep/ .van-tabs__nav--complete {
    background-color: #354499;
    .van-tab {
      color: #ffffff;
      font-weight: 500;
    }
    .van-tabs__line {
      background-color: #ffffff;
    }
  }
}
</style>
